.m-bill,
.m-bill-mask{
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.m-bill{
	z-index: 8;
	@include transform(translate3d(0, 0, 0));
  @include transition(all, .4s, ease-in-out);
  display: none;
  opacity: 0;
}

.m-bill-in{

	height: 100%;

	.bill-btm{
		color: $white;
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 6;
		text-align: center;

		.btn{
			background-color: #343434;
			padding: 10px 0;
			border-radius: 0;
			//border-bottom: 1px $dark-gray solid;
			&:active{
				box-shadow: none;
				color: $gray;
			}
			&:hover{
				color: $white;
			}
		}

		.cancel{
			padding: 18px 0;
			position: relative;
			z-index: 8;
			.btn{
				width: 80%;
				border-radius: 2px;
				box-shadow: inset 0 1px 0 #494949;
			}
			background-color: $black;
		}

		.bill-list{

			width: 80%;
			margin: 10px auto;
			padding: 4px 0;
			margin-bottom: 16px;
			background: #343434;
			border: solid 1px #141414;
			border-radius: 2px;
			box-shadow: inset 0 1px 0 #494949;

			@include transform(translate3d(0, 200%, 0));
  		@include transition(all, .3s, ease-in-out);
  		-webkit-transition-delay: .1s;
  		transition-delay: .1s;

			.btn{
				width: 80%;
				border-bottom: solid 1px #282828;
				border-top: solid 1px #3e3e3e;
				
			}

			li{
				&:first-child{
					.btn{
						border-top: none;
					}
				}
				&:last-child{
					.btn{
						border-bottom: none;
					}
				}
			}
		}
	}


}

.m-bill-mask{
	background-color: $black;
	@include transition(opacity, .2s, ease-in);
	opacity: 0;
}

.m-bill-open{

	.m-bill-mask{
		opacity: .92;
	}
	.m-bill{
		//@include transform(translate3d(0, 0, 0));
  	display: block;
	}

	.m-menu-in{
		display: none;
	}

	.m-body{
		//@include transform(scale(.98));
	}
}

.m-bill-open-mask{
	.m-bill{
		opacity: 1;
	}
	.bill-btm{
		.bill-list{
			@include transform(translate3d(0, 0, 0));

		}
	}
}


// @media (max-width: $screen-xs-max) {
// 	.m-bill{
// 		display: block;
// 	}

// }